<!DOCTYPE html>
<html>

<head>
  <title>welcome</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./css/index.css">
  <link rel="stylesheet" href="./css/typing.css">
  <script src="./js/typing.js"></script>
    <link href="./css/video.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <div id="aboutme">
    <img src="./picture/black.png" ;>
  </div>
  <div id="top">
    <div id="navi_body">
      <div id="navi_head">
        <div style="width:80%; margin-left:auto; margin-right:auto;">
          <span>
            <p id="navi_title">首页</p>
          </span>
          <span>
            <p id="navi_title">关于</p>
            <p><a href="#">团队介绍</a></p>
            <p><a href="#">服务</a></p>
            <p><a href="#">个人</a></p>
          </span>
          <span>
            <p id="navi_title">给我留言</p>
            <p><a href="#">站内留言</a></p>
            <p><a href="#">站长信箱</a></p>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div id ="header">
    <div id="welcome">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">
            <div id="source">
              welcome
            </div>
          </div>
          <div class="col-lg-6">
            <div class="output-wrap">
              <span id="output"></span>
              <span class="typing-cursor">|</span>
            </div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        var typing = new Typing({
          source: document.getElementById('source'),
          output: document.getElementById('output'),
          delay: 120,
          done: function() {
            console.log(this);
            console.log('done')
          }
        });
        typing.start();
      </script>
    </div>
    <div id="box">
      <div id="topbox">
        <img src="./picture/S70213.JPG" id="img">
        <div id="h2">
          <a href="#" id="talk">
            <span style="color: #3369e8;">Tech</span>
            <span style="color: #d50f25;">Otakus</span>
            <span style="color: #eeb211;">Save</span>
            <span style="color: #3369e8;">The</span>
            <span style="color: #009925;">World</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div id="main">
    <!-- main是背景和透明框以下的总div -->
    <div id="text">
      <div id="text1">
        <div id="round">
          <span id="month">2月</span>
        </br>
        <span id="day">21</span>
      </div>
      <a href="#" id="text1a">小米松果并非“纯正血统”，它救得了雷军？</a>
      <div id="label">
        <a href="#" id="labela">数码资讯</a>
      </div>
      <img src="./picture/1.jpg" id="text1img">
      <p id="text1p">2月20日，小米向媒体正式发出邀请函，在这份邀请函中，其发布会的主题为“我心澎湃”，并解释称：世界上有太多的未知和不可能，想到即将面对的这一切，我心澎湃。</p>
      <div id="bottom">
        <a href="#" id="more">阅读全文>></a>
      </div>
    </div>
    <div id="text2">
      <div id="round">
        <span id="month">10月</span>
      </br>
      <span id="day">12</span>
    </div>
    <a href="#" id="text1a">歼16航电系统优势远超苏30 可挂远程导弹攻击预警机</a>
    <div id="label">
      <a href="#" id="labela">军事资讯</a>
    </div>
    <img src="./picture/2.jpg" id="text2img">
    <div id="text2p">
      <p>近年来，随着第四代歼20隐形战机加入中国空军试装，中国空军进入了一个以优制优的全新时代。同时在三代战机技术上发展更先进的三代半战机，譬如新型的单发歼10C、双发的歼11D和歼16系列也都在加紧测试和服役。这些三代半战机协同第四代歼20战机可以有效的对抗和压制我周边逐渐出现的诸如阵风、F35等战机带来的威胁。</p>
    </div>
    <div id="bottom">
      <a href="#" id="more">阅读全文>></a>
    </div>
  </div>
  <div id="text3">
    <div id="round">
      <span id="month">12月</span>
    </br>
    <span id="day">10</span>
  </div>
  <a href="#" id="text1a">你的名字，你看了吗？</a>
  <div id="label">
    <a href="#" id="labela">电影资讯</a>
  </div>
  <div id="movie">
    <video id="my-video" class="video-js" controls preload="auto" style="width: 100% ;" 
  poster="./picture/video-img.jpg" data-setup="{}">
    <source src="https://dplayer.b0.upaiyun.com/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
  </div>
  <div id="moviep">
    <p>
      脱下校服穿上了西装，八年前彗星飞过，五年前你去的那个小镇，你不记得了。</br>
      “醒来的时候不知道自己为什么会哭，时常会有的事。”</br>
      “做过的梦总是回想不起，有一种忘记了什么丧失感。”</br>
      这八年你一直在寻找什么，你自己都不记得了。</p>
    </br>
  </div>
  <div id="bottom">
    <a href="#" id="more">阅读全文>></a>
  </div>
</div>
<div id="readmore" onclick="window.location.href='#'">
  <a href="#" id="readmorea">加载更多</a>
</div>
</div>
<!-- 下面的是右面的代码 -->
<div id="right">
  <div id="right1">
    <img src="./picture/right1.jpg" id="right1img">
    <p id="catchme">来找我玩啊！</p>
    <div id="ra">
      <div id="ra1">
        <a href="#" id="q">Q</a>
      </div>
      <div id="ra2">
        <a href="#" id="w">W</a>
      </div>
      <div id="ra3">
        <a href="#" id="z">Z</a>
      </div>
    </div>
    <div id="rb">
      <div id="rb1">
        <a href="#" id="a">A</a>
      </div>
      <div id="rb2">
        <a href="#" id="b">B</a>
      </div>
      <div id="rb3">
        <a href="#" id="c">C</a>
      </div>
      <div id="rb4">
        <a href="#" id="d">D</a>
      </div>
    </div>
  </div>
 <!--  <div id="music">
    <div>
      <img src="./picture/mp3.jpg" id="musicimg">
    </div>
    <div id="playBtn">
      <img src="./picture/play.jpg" id="play">
    </div>
    <div>
      <audio id="mp3" preload="preload"  loop="loop" preload="preload" src="http://cc.stream.qqmusic.qq.com/C100001biOrm3GswU2.m4a?fromtag=52">
        你的浏览器不支持audio标签
      </audio> 
      <script type="text/javascript">
            </script>
            <div  id="mp3Container">
              <div id="mp3Controls"> 
                <div id="progressWrap">  
                  <div id="playProgress">  
                  </div>
                </div>
              </div> 
            </div>
            <script type="text/javascript" src="./js/mp3.js"></script> 
          </div>
        </div> -->
        <div id="sub" onClick="subup()" ;> 
          <div id="sub1">
            <script type="text/javascript">
              function subup(){
               var x = document.getElementById("subp1").innerHTML;
               var x = parseInt(x);
               x = x + 1;
               document.getElementById("subp1").innerHTML=x;
             }
           </script>
           <p id="subp">喜欢就点赞吧！</p>
         </br>
         <p id="subp1">233</p>
         <p id="heart">♥</p>
       </div>
     </div>
     <div id="chat">
      <div id="chatlabel">
        <a href="#" id="labela">一起来聊天吧</a>
      </div>
      <div id="chat1">
        <img src="./picture/qq.png" id="chat1img">
        <p id="chat1a">QQ评论你说：</p>
        <p>给你666</p>
      </div>
      <div id="chat1">
        <img src="./picture/qq.png" id="chat1img">
        <p id="chat1a">QQ评论你说：</p>
        <p>学生党，爱玩游戏，这个手机，，还没用过联发科的手机， 问问吧友，400兆以内的游戏能玩不?例王者。。之前一部是华为荣耀6，麒麟920的cpu处理器感觉不错， 还有手机信号怎么样？可以用到两年吗?
        </p>
      </div>
      <div id="chat1">
        <img src="./picture/weichat.png" id="chat1img">
        <p id="chat1a">微信评论你说：</p>
        <p>魅蓝手机操作体验太差，自从更新之后非常不好。我也不知道怎么刷回低版本，懒得查了，一直没用。举个例子，现在版本，你打开贴吧某个帖子。临时想去打开qq发信息，要先退出帖子，再退出吧，回到app首页，再退出贴吧app，然后才能打开qq。而且你想再回到原来那帖子只能重新进。这什么狗屁？单核手机都没这么蠢吧？</p>
      </div>
    </div>
    <div id="close" onclick="display()">
      关闭侧边栏
    </div>
    <script type="text/javascript">
      function display(){
        var rdis = document.getElementById("right");
        rdis.style.display = "none";
        document.getElementById("text").style.width="90%";
        document.getElementById("main").style.height="3600px"
      }
    // window.onresize=function(){
    //   if (document.getElementById("right1").style.height < "281px;") {
    //     display()
    //   } }
  </script>
</div>
</div>
<div id ="gps" onclick="goTopEx()" style="display: none;">
  <script type="text/javascript"> 
    function goTopEx() { 
      var obj = document.getElementById("gps"); 
      function getScrollTop() { 
        return document.documentElement.scrollTop + document.body.scrollTop; 
      } 
      function setScrollTop(value) { 
        if (document.documentElement.scrollTop) { 
          document.documentElement.scrollTop = value; 
        } else { 
          document.body.scrollTop = value; 
        } 
      } 
      window.onscroll = function() { 
        getScrollTop() > 800 ? 
        obj.style.display = "": obj.style.display = "none"; 
      } 
      obj.onclick = function() { 
        var goTop = setInterval(scrollMove, 10); 
        function scrollMove() { 
          setScrollTop(getScrollTop() / 1.1); 
          if (getScrollTop() < 1) clearInterval(goTop); 
        } 
      } 
    } 
    goTopEx();
  </script>
  <div id="gps1">
    <img src="./picture/go-top2.png"   
    onMouseOver="this.src='./picture/go-top.png'"
    onMouseOut="this.src='./picture/go-top2.png'">
  </div>
</div>
<!-- <div id="qq2dcore">
  <img id="qq2dcore" src="./picture/qq2d.jpg">
</div> -->
<div id="blackbox">
  <div id="l">
    <p>关于本站</p>
  </br>
  <a id="lp1" href="#">本站资源</a>
  <a id="lp" href="#">技术提供</a>
  <a id="lp" href="#">帮助中心</a>
</div>
<div id="center">
  <p>传送门</p>
</br>
<a href="#">w3c教程</a>
<a id="lp" href="#">GitHub</a>
<a id="lp" href="#">友情链接</a>
</div>
<div id="r">
  <div id="qc">
    <img id="Q" src="./picture/qq.png">
  </div>
  <div id="QQ2d">
   <img id="qq2d" src="./picture/qq2d.jpg">
 </div>
 <div id="wc">
  <img id="W" src="./picture/weichat.png">
</div>
<div id="W2d">
 <img id="w2d" src="./picture/weichat2d.jpg">
</div>
</div>
</div>
</body>
</html>